<template>
  <div class="box">
    <h1>这是CompA组件,{{mynum}}</h1>
    <button @click="handleAdd">让状态机的num增加</button>
    <button @click="handleGoodsAdd({
      name:'新商品',
      price:(Math.random()*100+50).toFixed(2),
      n:1
    })">新增商品</button>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
        名称:{{item.name}}
        价格:{{item.price}}
        数量:{{item.n}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    computed: {
      // 方法1:
      // mynum() {
      //   return this.$store.state.count.num //提取状态机数据包
      // },
      // goods(){
      //   return this.$store.state.goods.goods
      // }
      // 方法2: 使用辅助函数
      ...mapState({
        mynum:state=>state.count.num,
        goods:state=>state.goods.goods
      })
    },
    methods: {
      // 方法1:
      // handleAdd() {
      //   this.$store.commit('count/plus')
      // },
      // handleGoodsAdd(){
      //   this.$store.commit('goods/goodsAddMut',{
      //     name:'新商品',
      //     price:(Math.random()*100+50).toFixed(2),
      //     n:1
      //   })
      // },
      // 方法2：使用辅助函数
      ...mapMutations({
        handleAdd:'count/plus',
        handleGoodsAdd:'goods/goodsAddMut'
      })
    },
  }
</script>

<style src="../../assets/css/test.css" scoped></style>
<style lang="less" scoped>
// @import url('../../assets/css/test.css');  //影响全局
// h1{
//   font-size: 50px;
//   font-weight: bold;
// }
.box{
  width: 45%;
  border: 3px solid #333;
  height: 500px;
  float: left;
}
</style>